<template>
    <view>
        <!-- 状态栏 -->
        <cu-custom bgColor="bg-gradual-green">
            <block slot="content">我的</block>
        </cu-custom>

        <div class="line_div_thick"></div>

        <!-- 头像信息栏 -->
        <view class="padding-xl radius shadow bg-white">
            <view class="cu-avatar xl round margin-left"
                :style="'background-image:url(' + currentUser.avatar + ');'"
                v-show="hasCurrentuser()"/>
            <text class="text_std_name" v-show="hasCurrentuser()">{{currentUser.username}}</text>
            <view class="text-center">
                <text class="text-black text-bold" v-show="!hasCurrentuser()">
                    请进行微信授权并绑定账号
                </text>
            </view>
        </view>

        <div class="line_div_thick"></div>

        <!-- 菜单栏 -->
        <view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
            <view class="cu-item arrow">
                <button class="cu-btn content" @click="person">
                    <image class="icon_button" src="/static/bussiness-man.svg"></image>
                    <text class="text-grey">个人信息</text>
                </button>
            </view>
            <view class="cu-item arrow">
                <button class="cu-btn content" @click="invoice">
                    <image class="icon_button" src="/static/file.svg"></image>
                    <text class="text-grey">订单与发票管理</text>
                </button>
            </view>
            <view class="cu-item arrow">
                <button class="cu-btn content" @click="switchUser">
                    <image class="icon_button" src="/static/switch.svg"></image>
                    <text class="text-grey">账号切换</text>
                </button>
            </view>
        </view>

        <view style="text-align: center;margin-top: 20rpx;">
            <button class="cu-btn bg-green shadow" style="margin-right: 20rpx;" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">{{state}}</button>
            <button class="cu-btn bg-green shadow" style="margin-left: 20rpx;" @click="tel">扫码绑定账号</button>
        </view>
    </view>
</template>

<script>
import {USER_API} from '@/API.js';
import {setCourseToStorage} from '@/storage.vue';
export default {
    data() {
        return {
            currentUser: {
                'uuid': 'uuid',
                'username': '',
                'avatar': ''
            },
            state: '微信授权',
            onload: true,
        };
    },
    onLoad() {
        uni.getUserInfo({
            success: (res) => {
                uni.login({
                    provider: 'weixin',
                    success: (loginRes) => {
                        uni.request({
                            url: USER_API.login.url,
                            method: USER_API.login.method,
                            data: {
                                'code': loginRes.code,
                                'iv': res.iv,
                                'encryptedData': res.encryptedData
                            },
                            success: function(value) {
                                getApp().globalData.user = {'token': value.data.token,
                                    'uuid': value.data.uuid,
                                    'username': value.data.username,
                                    'avatar': value.data.avatar};
                                console.log(getApp().globalData.user);
                                this.currentUser.uuid = value.data.uuid;
                                this.currentUser.username = value.data.username;
                                this.currentUser.avatar = value.data.avatar;
                                this.onload = false;
                                this.getCourseInfo();
                            }.bind(this),
                            fail: (value) => {
                                console.log(value);
                            }
                        });
                        this.state = '已完成授权';
                    },
                    fail: function(e) {
                        console.log(e);
                    }
                });
            },
            fail: function(e) {
                console.log(e);
            },
        });
    },
    onShow() {
        //console.log('onshow');
        if (!this.onload) {
            uni.request({
                url: USER_API.user.url,
                method: USER_API.user.method,
                header: {'http-token': this.getToken()},
                success: function(res) {
                    //console.log(res);
                    this.currentUser.uuid = res.data.uuid;
                    this.currentUser.username = res.data.username;
                    this.currentUser.avatar = res.data.avatar;
                }.bind(this)
            });
        }
    },
    methods: {
        hasCurrentuser: function() {
            return (this.currentUser.uuid != 'uuid' && this.currentUser.uuid != '');
        },
        person: function() {
            if (!this.hasCurrentuser()) {
                uni.showToast({
                    title: '请进行微信授权并绑定账号',
                    icon: 'none',
                    duration: 2000
                });
            }
            else {
                uni.navigateTo({
                    url: 'personalinfo/personalInfo',
                    success: function() { console.log('ok'); },
                    fail: function() { console.log('fail'); },
                    complete: function() {}
                });
            }
        },
        invoice: function() {
            if (!this.hasCurrentuser()) {
                uni.showToast({
                    title: '请进行微信授权并绑定账号',
                    icon: 'none',
                    duration: 2000
                });
            }
            else {
                uni.navigateTo({
                    url: 'invoice/invoice',
                    success: function() { console.log('ok'); },
                    fail: function() { console.log('fail'); },
                    complete: function() {}
                });
            }
        },
        switchUser: function() {
            if (!this.hasCurrentuser()) {
                uni.showToast({
                    title: '请进行微信授权并绑定账号',
                    icon: 'none',
                    duration: 2000
                });
            }
            else {
                uni.navigateTo({
                    url: 'switchuser/switchUser',
                    success: function() { console.log('ok'); },
                    fail: function() { console.log('fail'); },
                    complete: function() { console.log('comp'); }
                });
            }
        },
        tel: function() {
            uni.scanCode({
                success: (res) => {
                    uni.request({
                        url: USER_API.bind.url,
                        method: USER_API.bind.method,
                        header: {'http-token': this.getToken()},
                        data: {
                            'scan_result': res.result,
                            'scan_type': res.scanType,
                            'char_set': res.charSet,
                            'path': res.path
                        },
                        success: function(state) {
                            console.log(state);
                            uni.request({
                                url: USER_API.user.url,
                                method: USER_API.user.method,
                                header: {'http-token': this.getToken()},
                                success: function(res) {
                                    this.curr_user.uuid = res.data.uuid;
                                    this.curr_user.username = res.data.username;
                                    this.curr_user.avatar = res.data.avatar;
                                }.bind(this)
                            });
                        }.bind(this),
                        fail: (state) => {
                            console.log(state);
                            //绑定失败 state.result=0
                        }
                    });
                },
                fail: (e) => {
                    console.log(e);
                }
            });
        },
        wxGetUserInfo: function() {
            uni.getUserInfo({
                success: (res) => {
                    uni.showToast({
                        title: '授权成功',
                        duration: 1000
                    });
                    uni.login({
                        provider: 'weixin',
                        success: (loginRes) => {
                            uni.request({
                                url: USER_API.login.url,
                                method: USER_API.login.method,
                                data: {
                                    'code': loginRes.code,
                                    'iv': res.iv,
                                    'encryptedData': res.encryptedData
                                },
                                success: (value) => {
                                    getApp().globalData.user = {'token': value.data.token,
                                        'uuid': value.data.uuid,
                                        'username': value.data.username,
                                        'avatar': value.data.avatar};
                                    console.log(getApp().globalData.user);
                                    this.currentUser.uuid = value.data.uuid;
                                    this.currentUser.username = value.data.username;
                                    this.currentUser.avatar = value.data.avatar;
                                    this.onload = false;
                                    this.getCourseInfo();
                                },
                                fail: (value) => {
                                    console.log(value);
                                }
                            });
                            this.state = '已完成授权';
                        },
                        fail: function(e) {
                            console.log(e);
                        }
                    });
                },
                fail: function(e) {
                    console.log(e);
                }
            });
        },
        getCourseInfo: async function() {
            await setCourseToStorage();
        }
    }
};
</script>

<style>
    .view_content {
        display: flex;
        flex-direction: column;
    }

    .view_std_info {
        display: flex;
        flex-direction: row;
        margin-top: 50rpx;
        margin-bottom: 50rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
    }

    .text_std_name {
        font-size: 50rpx;
        font-weight: bold;
        color: #333333;
        margin-left: 50rpx;
    }

    .button_std {
        margin-right: 50rpx;
        font-size: 30rpx;
    }

    .button_main {
        font-size: 30rpx;
        color: #000000;
        width: 100%;
        height: 120rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #FFFFFF;
    }

    .button_main::after {
        border: none;
    }

    .line_div_thick {
        width: 100%;
        height: 15rpx;
    }

    .line_div_thin {
        width: 100%;
        height: 3rpx;
        background-color: #C8C7CC;
    }

    .icon_button {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
    }

    .icon_rightarrow {
        width: 60rpx;
        height: 60rpx;
        position: fixed;
        right: 20rpx;
    }
</style>
